<template>
  <div class="home_club">
     <!-- 俱乐部快捷入口 -->
    <div class="quick_list_box">
      <div v-for="item in buttons" :key="item.id" class="button_item" @click="goToPage(item)">
        <div class="button_item_left">
          <img :src="item.icon" :alt="item.text" class="icon" />
          <span>{{ t(item.text) }}</span>
        </div>
        <div class="button_item_right">
          <img :src="item.logo" :alt="item.text" class="logo" />
        </div>
      </div>
    </div>

    <!-- 加入的俱乐部 -->
    <div class="club_list_box">
      <ul class="card_title">
        <li class="title_left">
          <ImgT src="/imgs/club/icon1.webp" alt="" />
          <span>加入的俱乐部</span>
        </li>
        <li class="title_right">
          <p class="more" @click="router.push('/club/myClub')">
            {{ t('home_page_more') }}
          </p>
        </li>
      </ul>
      <div class="club_list">
        <div v-for="club in clubs" :key="club.id" class="club_card">
          <div class="club_icon">
            <img :src="club.icon" alt="club_icon" />
            <span class="badge" :class="club.roleClass">{{ club.role }}</span>
          </div>
          <div class="club_info">
            <h3 class="club_name">{{ club.name }}</h3>
            <p class="club_id">ID: {{ club.id }}</p>
            <p class="club_desc">{{ club.description }}</p>
          </div>
          <div class="club_action">
            <button @click="enterClub" class="club_btn">
              {{ club.tables }}桌
            </button>
            <ImgT src="/imgs/club/arrow.png" class="arrow" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!-- 加入的牌局 -->
    <div class="gambling_list_box">
      <ul class="card_title">
        <li class="title_left">
          <ImgT src="/imgs/club/icon1.webp" alt="" />
          <span>加入的牌局</span>
        </li>
        <li class="title_right">
          <p class="more" @click="router.push('/club/myHandList')">
            {{ t('home_page_more') }}
          </p>
        </li>
      </ul>
      <div class="card_container">
        <div class="card" v-for="(card, index) in cardList" :key="index">
          <div class="info">
            <div class="title">{{ card.title }}</div>
            <div class="details">
              <ImgT src="/imgs/club/jinbi.png" class="jinbi" alt="" />
              <span class="price">{{ card.price }}</span>
            </div>
          </div>
          <div class="players_box">
            <span class="players">
              <ImgT src="/imgs/club/people.png" class="icon_player" alt="" />
              <span>{{ card.players }}</span>
            </span>
          </div>
          <div class="action">
            <div class="button">
              <div>
                <p>买入</p>
                <p class="price">{{ card.buyIn }}</p>
              </div>
              <ImgT src="/imgs/club/arrow.png" class="arrow" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加入俱乐部弹窗 -->
    <Modal v-model:visible="isShowWin" :title="t(club_title)" @close="">
      <div class="popup_body">
        <div class="info">{{ club_pl_text }}</div>
        <nut-input v-model="club_id" :placeholder="club_pl_text" />
        <div class="submit_btn">
          <Btn height="44px" width="200px" class="submit" @click="submitAc">{{ t('club_page_ss') }}</Btn>
        </div>
      </div>
    </Modal>

    <!-- 快速游戏 -->
    <QuickStartModal
      v-model:visible="isShowApply"
      :close="onModalClose"
    />
  </div>
</template>

<script setup lang="ts">
import {  ref, onBeforeMount } from 'vue';
import { i18n } from '@/languages';
import { storeToRefs } from 'pinia';
import pinia from '@/store/index';
import { useI18n } from 'vue-i18n';
import { Page } from '@/store/page';

import { useRouter } from "vue-router";
const router = useRouter();

const {
  lang
} = storeToRefs(Page(pinia));
const { t } = useI18n();

import QuickStartModal from "@/components/quickStartModal.vue";

const buttons: any = ref([
  {
    id: 1,
    text: 'club_page_cjjlb',
    value: 'create',
    icon: '/imgs/club/club1.webp',
    logo: '/imgs/club/icon1.webp',
    route: '/club',
  },
  {
    id: 2,
    text: 'club_page_jrjlb',
    value: 'join',
    icon: '/imgs/club/club2.webp',
    logo: '/imgs/club/icon2.webp',
    route: '',
  },
  {
    id: 3,
    text: 'club_page_jrpj',
    value: 'joinPlay',
    icon: '/imgs/club/club3.webp',
    logo: '/imgs/club/icon3.webp',
    route: '',
  },
  {
    id: 4,
    text: '快速开始',
    value: 'start',
    icon: '/imgs/club/club4.webp',
    logo: '/imgs/club/icon4.webp',
    route: '',
  },
]);

const clubs: any = ref([
  {
    id: 1223455,
    name: '天天王炸小伙伴',
    icon: '/imgs/club/culdlogo.png',
    role: '创建者',
    roleClass: 'creator',
    description: '俱乐部简介XXXXXXXXXXXXXXXX',
    tables: 1,
  },
  {
    id: 1223456,
    name: '天天王炸小伙伴',
    icon: '/imgs/club/culdlogo.png',
    role: '管理员',
    roleClass: 'admin',
    description: '俱乐部简介XXXXXXXXXXXXXXXX',
    tables: 1,
  },
  {
    id: 1223457,
    name: '天天王炸小伙伴',
    icon: '/imgs/club/culdlogo.png',
    role: '官方',
    roleClass: 'official',
    description: '俱乐部简介XXXXXXXXXXXXXXXX',
    tables: 1,
  },
  {
    id: 1223458,
    name: '天天王炸小伙伴',
    icon: '/imgs/club/culdlogo.png',
    role: '成员',
    roleClass: 'member',
    description: '俱乐部简介XXXXXXXXXXXXXXXX',
    tables: 1,
  },
]);

const cardList: any = ref([
  { title: '德州快乐小伙伴', price: '$ 0.25/0.6', players: '3/8', buyIn: 200 },
  { title: '欢乐德州桌', price: '$ 1.5/3.0', players: '5/8', buyIn: 500 },
  { title: '激情桌牌', price: '$ 0.5/1.0', players: '2/8', buyIn: 100 },
  { title: '大牌桌', price: '$ 2.0/4.0', players: '7/8', buyIn: 1000 }
]);

const isShowApply = ref(false);
const handleStartClick = () => {
  console.log("快速开始按钮被点击");
  isShowApply.value = true
}

const onModalClose = () => {
  isShowApply.value = false;
};

const isShowWin = ref(false);
const club_id = ref('');
const club_title = ref('');
const club_pl_text = ref('')

const goToPage = (item: any) => {
  if (item.value === 'create') {
    router.push(item.route)
  } else if (['join', 'joinPlay'].includes(item.value)) {
    isShowWin.value = true
    club_title.value = item.text
    club_pl_text.value = item.value === 'join' ? '请输入俱乐部ID' : '请输入牌局ID'
  } else if (item.value === 'start') {
    handleStartClick()
  }
}

const enterClub = () => {
  router.push('/club/detail')
}

const submitAc = () => {
  console.log('加入--')
}

onBeforeMount(() => {
  i18n.global.locale.value = lang.value
})
</script>

<style lang="scss" scoped>
.home_club {
  .club_list_box {
      padding-left: 14px;

      .card_title {
        display: flex;
        padding: 0 14px;
        justify-content: space-between;
        align-items: center;
        height: 24px;
        line-height: 24px;
        margin: 12px 0;

        .title_left {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 600;
          line-height: 16px;
          text-align: left;
          color: #FCFFFA;
          display: flex;
          justify-content: space-between;
          align-items: center;

          img {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
        }

        .title_right {
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 500;
          line-height: 12px;
          text-align: left;
          color: #C6C4F5;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .more {
            background: #282747;
            margin-left: 8px;
            padding: 8px;
            border-radius: 5px;
            box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
          }

          .swiper-btn {
            margin-left: 8px;
          }

          .disabled {
            pointer-events: none;
            opacity: 0.5;
            cursor: not-allowed;
          }
        }
      }

      .club_list {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .club_card {
          width: 347px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          border-radius: 10px;
          padding: 10px;
          color: white;
          background: url(/imgs/club/add_club_bg.png) no-repeat;
          background-size: 100% 100%;

          .club_icon {
            position: relative;
            width: 48px;
            height: 48px;
            margin-right: 8px;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }

            .badge {
              width: 48px;
              position: absolute;
              bottom: -5px;
              right: -5px;
              border-radius: 0 0 8px 8px;
              font-size: 12px;
              text-align: center;
              color: white;
              background: rgba(0, 0, 0, 0.6);
            }
          }

          .club_info {
            flex: 1;
            overflow: hidden;

            .club_name {
              font-size: 14px;
              font-weight: bold;
              margin: 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .club_id,
            .club_desc {
              font-size: 12px;
              margin: 4px 0 0;
              font-family: PingFang SC;
              color: #AFB6BD;
            }
          }

          .club_action {
            display: flex;
            align-items: center;

            .club_btn {
              width: 40px;
              height: 20px;
              color: white;
              border: none;
              border-radius: 5px;
              font-size: 12px;
              line-height: 20px;
              background: #1DBA8B;
            }

            .arrow {
              width: 16px;
              height: 16px;
              margin-left: 10px;
              font-size: 18px;
              color: #FFFFFF;
            }
          }
        }
      }
    }

    .gambling_list_box {
      padding-left: 14px;

      .card_title {
        display: flex;
        padding: 0 14px;
        justify-content: space-between;
        align-items: center;
        height: 24px;
        line-height: 24px;
        margin: 12px 0;

        .title_left {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 600;
          line-height: 16px;
          text-align: left;
          color: #FCFFFA;
          display: flex;
          justify-content: space-between;
          align-items: center;

          img {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
        }

        .title_right {
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 500;
          line-height: 12px;
          text-align: left;
          color: #C6C4F5;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .more {
            background: #282747;
            margin-left: 8px;
            padding: 8px;
            border-radius: 5px;
            box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
          }

          .swiper-btn {
            margin-left: 8px;
          }

          .disabled {
            pointer-events: none;
            opacity: 0.5;
            cursor: not-allowed;
          }
        }
      }

      .card_container {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .card {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 347px;
          height: 60px;
          border-radius: 10px;
          padding: 0 0 0 15px;
          background: url(/imgs/club/add_club_bg.png) no-repeat;
          background-size: 100% 100%;
          box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

          .info {
            width: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .title {
              font-size: 16px;
              font-weight: bold;
            }

            .details {
              // display: flex;
              // justify-content: space-between;
              margin-top: 5px;
              font-size: 14px;
              color: #a0a0b0;

              .jinbi {
                width: 16px;
                height: 16px;
                margin-right: 8px;
                vertical-align: sub;
              }

              .price {
                margin-right: 15px;
                color: #C6C4F5;
              }
            }
          }

          .players_box {

            .players {
              .icon_player {
                width: 20px;
                height: 20px;
                margin: 0 auto;
                display: block;
              }

              span {
                font-size: 14px;
                color: #C6C4F5;
              }
            }
          }

          .action {
            display: flex;
            align-items: center;
            width: 90px;
            height: 100%;
            background: rgba(250, 250, 250, 0.21);
            border-radius: 8px;
            padding: 5px 15px;

            .button {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              border-radius: 8px;
              color: #ffffff;
              font-size: 14px;

              .price {
                color: #C6C4F5;
              }
            }

            .arrow {
              width: 16px;
              height: 16px;
              margin-left: 15px;
            }
          }
        }
      }
    }

    .quick_list_box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding: 10px;

      .button_item {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 168px;
        height: 68px;
        border-radius: 10px;
        color: white;
        text-align: center;
        box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

        .button_item_left {
          .icon {
            width: 24px;
            height: 24px;
            display: block;
            margin: 0 auto 6px;
          }

          span {
            font-size: 14px;
            text-align: center;
            color: #FFFFFF;
          }
        }

        .button_item_right {
          .logo {
            width: 58px;
            height: 58px;
          }
        }
      }

      .button_item:nth-child(1) {
        background: url(/imgs/club/add1_bg.png) no-repeat;
        background-size: 100% 100%;
      }

      .button_item:nth-child(2) {
        background: url(/imgs/club/add2_bg.png) no-repeat;
        background-size: 100% 100%;
      }

      .button_item:nth-child(3) {
        background: url(/imgs/club/add3_bg.png) no-repeat;
        background-size: 100% 100%;
      }

      .button_item:nth-child(4) {
        background: url(/imgs/club/add4_bg.png) no-repeat;
        background-size: 100% 100%;
      }
    }
}
.popup_body {
  color: #fff;
  padding: 10px;

  .info {
    margin-bottom: 10px;
  }
  :deep(.nut-input) {
    background: rgba(29, 14, 74, 1);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
    border-radius: 8px;
    border-bottom: 0;
    padding: 10px;
  }
  .submit_btn {
    margin: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>